<template>
	<view class="select-times">
		<view class="" @click="showPopup=true">
			<slot>
				<view class="bgf radius20 align-center justify-between active_bg ptb25 plr30 fs30">
					<slot name="title">
						<text>{{title}}</text>
					</slot>
					<slot name="value">
						<view class="align-center">
							<text class="mr10">{{timeStr}}</text>
							<u-icon name="arrow-right" color="#A9A9A9" />
						</view>
					</slot>
				</view>
			</slot>
		</view>
		<view class="">
			<u-popup :show="showPopup" round="20rpx" @close="showPopup=false" closeable>
				<view class="popup_content column radius20 ">
					<text class="fs30 bold center mt25">{{popupTitle}}</text>
					<u-divider />
					<view class="grids">
						<view :class="index==current?'grids_item grids_item_active':'grids_item'" v-for="(item,index) in timeList"
							:key="index" @click="current=index">{{item.date}}</view>
					</view>
					<u-divider />
					<view class="grids">
						<view :class="dayType==0?'grids_item grids_item_active':'grids_item'"
							@click="!getDisableDayType?dayType=0:null"
							:style="{filter:`grayscale(${getDisableDayType?'1':'0'})`,background:getDisableDayType?'#3f79eb':''}">
							上午</view>
						<view :class="dayType==1?'grids_item grids_item_active':'grids_item'" @click="dayType=1">下午</view>
					</view>
					<view class="align-center mt50 p30" style="gap: 20rpx;">
						<u-button :text="cancelText" type="primary" plain :customStyle="{height:'80rpx'}" v-if="showCancel"
							@click="onCancel" />
						<u-button text="确认" type="primary" :customStyle="{height:'80rpx'}" @click="onConfirm" />
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		getTime as housekeepingTime
	} from '@/api/mall/housekeeping.js';
	import {
		getTime as caregiverTime
	} from '@/api/mall/caregiver.js';
	const props = defineProps({
		title: {
			type: String,
			default: '服务时间'
		},
		value: {
			type: String,
			default: ''
		},
		popupTitle: {
			type: String,
			default: '选择时间'
		},
		type: {
			type: String,
			default: 'housekeeping',
		},
		showCancel: {
			type: Boolean,
			default: false,
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		immediately: {
			type: Boolean,
			default: true,
		},
		getDataStr: {
			type: Boolean,
			default: false,
		}
	})
	const emits = defineEmits(['cancel', 'confirm'])
	// api列表
	const apiList = [{
		type: 'housekeeping',
		methods: housekeepingTime
	}, {
		type: 'caregiver',
		methods: caregiverTime
	}, ]
	const timeList = ref([])
	const current = ref(0)
	const dayType = ref(0)
	onMounted(() => {
		if (props.type) {
			let data = apiList.find(item => item.type == props.type)
			if (data) {
				data.methods().then(res => {
					timeList.value = res.data
					if (props.immediately) onConfirm()
				})
			}
		} else {
			console.warn('未传入属性type,通过type判断api列表');
		}
	})
	// popup
	const showPopup = ref(false)
	const timeStr = ref('')
	const onCancel = () => {
		showPopup.value = false
		emits('cancel')
	}
	const onConfirm = () => {
		if (props.getDataStr) {
			timeStr.value = `${timeList.value[current.value].format_date}`
		} else {
			timeStr.value = `${timeList.value[current.value].format_date} ${dayType.value == 0 ? '上午' : '下午'}`
		}
		showPopup.value = false
		emits('confirm', timeStr.value)
	}
	// 上午下午禁用
	const getDisableDayType = computed(() => {
		let dis = true
		let d = new Date().getDate()
		let pd = new Date(timeList.value[current.value].format_date).getDate()
		if (pd > d) {
			dis = false
			dayType.value = 0
		} else if (pd == d) {
			if (new Date().getHours() > 12) {
				dis = true
				dayType.value = 1
			} else {
				dis = false
				dayType.value = 0
			}
		}
		return dis
	})
	defineExpose({
		name: 'select-times'
	})
</script>

<style lang="scss" scoped>
	.select-times {
		.grids {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: 20rpx;
			grid-column-gap: 20rpx;
			padding: 20rpx 30rpx;

			&_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #d1d1d1;
				transition: .3s;
				white-space: nowrap;

				&_active {
					border: 1rpx solid $--base-color;
					color: #fff;
					background: $--base-bg;
				}
			}
		}
	}
</style>